<template>
    <div class="component-table-view">
        <div class="table-view-box">
            <div class="left-view" :style="{width: leftWidth}">
                <div v-if="doubleTitle" class="left-head doubleTitle">{{labels[0].label.max}}</div>
                <div v-else="" class="left-head">{{labels[0].label}}</div>
                <div class="left-item" v-for="item in data">{{item[labels[0].key]}}</div>
            </div>
            <div ref="content-box" class="content-box" :class="{shadow: contentWidth && shadow && false}">
                <div class="content">
                    <table :style="{width: contentWidth ? contentWidth / 10 + 'rem' : 'auto'}">
                        <thead>
                        <tr v-if="doubleTitle">
                            <th class="doubleTitle" v-for="(label, k) in labels" v-if="k" :key="k"
                                :style="{width: label.width ? `${label.width / 10}rem` : 'auto'}">
                                <div class="max">{{label.label.max}}</div>
                                <div class="min">{{label.label.min}}</div>
                            </th>
                        </tr>
                        <tr v-else="">
                            <th v-for="(label, k) in labels" v-if="k" :key="k"
                                :style="{width: label.width ? `${label.width / 10}rem` : 'auto'}">{{label.label}}
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, key) in data" :key="key">
                            <td v-for="(label, k) in labels" v-if="k"
                                :style="{width: label.width ? `${label.width / 10}rem` : 'auto'}">
                                <span :style="contentHeight">{{item[label.key]}}</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div v-if="requestBtn" class="request-btn" @click="$emit('onRequest')">{{requestBtn}}</div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-table-view {

        .table-view-box {

            display: flex;
            font-size: 1.2rem;
            text-align: center;
            border-top: 1px solid @color-line-gray;

            .left-view {
                color: @color-black;
                .left-head {
                    font-weight: bold;
                    line-height: 3.3rem;

                    &.doubleTitle {
                        line-height: 5.7rem;
                    }
                }
                .left-item {
                    line-height: 4rem;
                    background-color: @color-table-label;
                }
            }

            .content-box {
                flex: 1;
                overflow: hidden;
                &.shadow {
                    position: relative;
                    &:before {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        padding: 5rem 0;
                        left: 0;
                        top: -5rem;
                        box-shadow: 0rem 0 2rem 1.5rem rgba(255, 255, 255, .7) inset;
                    }
                }
            }

            .content {
                width: 100%;
                overflow: auto;

                * {
                    margin: 0;
                    padding: 0;
                }

                table {
                    min-width: 100%;
                    border-spacing: 0;
                    th {
                        line-height: 3.3rem;
                    }
                    .doubleTitle {
                        line-height: 1.7rem;
                        .max {
                            font-size: 1.2rem;
                        }
                        .min {
                            font-size: 1rem;
                        }
                        padding: 1.15rem 0;
                        font-weight: normal;
                    }

                    td {
                        width: 200px;
                        line-height: 4rem;
                        background-color: @color-table-content;
                        span{
                            display: block;
                        }
                    }
                }
            }

        }
        .request-btn {
            text-align: center;
            font-size: 1.2rem;
            line-height: 3.7rem;
            background-color: @color-table-content;
            border-top: 1px solid @color-line-gray;
        }
    }


</style>

<script>
    export default {
        data() {
            return {
                shadow: true
            }
        },
        computed: {
            leftWidth() {
                return this.labels[0].width ? `${this.labels[0].width / 10}rem` : 'auto';
            },
            doubleTitle() {
                return this.labels[0].label.constructor == Object;
            },
            contentHeight(){
                const style = {};
                if(this.lineHeight){
                    style.height = this.lineHeight / 10 + 'rem';
                    style.lineHeight = this.lineHeight / 10 + 'rem';
                }
                return style;
            }
        },
        props: ['labels', 'data', 'request-btn', 'content-width', 'line-height'],
        mounted() {
            const dom = this.$refs['content-box'];
            dom.ontouchstart = () => {
                this.shadow = false;
            }
            dom.ontouchend = () => {
                this.shadow = true;
            }
        }
    }
</script>